<template>
  <div
    ref="chart_l"
    :class="className"
    :style="{ height: height, width: width }"
  />
  <!--  <div :id="id" :class="className" />-->
</template>

<script>
import echarts from 'echarts'
import resize from './mixins/resize'

export default {
  mixins: [resize],
  props: {
    chartData: {
      type: Object,
      required: true
    },
    className: {
      type: String,
      default: 'chart'
    },
    id: {
      type: String,
      default: 'zx'
    },
    width: {
      type: String,
      default: '1500px'
    },
    height: {
      type: String,
      default: '450px'
    }
  },
  data() {
    return {
      chart: null,
      showSeries: [],
      op: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: function(params) {
            var res = '<center>' + params[0].axisValue + '</center>'
            // const arr = ['流入需求', '完成需求', '上线需求']
            for (var i = 0; i < params.length; i++) {
              // a = params[i].seriesId.slice(-1) // 获取标识数据进行格式化
              res += params[i].marker + params[i].seriesName + ' : ' + params[i].value + '<br>'
            }
            return res
          }
        },
        legend: {
          data: this.chartData.legend_data,
          selected: this.chartData.legend_selected,
          align: 'auto',
          type: 'scroll',
          // top: "5%", // bottom:"20%" // 组件离容器的距离
          // right: '10%',
          // left: '10%',
          // bottom:"90%"
          x: 'center'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          inverse: true, // 倒序
          data: this.chartData.xAxis_data
        },
        yAxis: {
          type: 'value'
        },
        dataZoom: [
          {
            show: true,
            realtime: true,
            start: 0,
            end: 100
          },
          {
            type: 'inside',
            realtime: true,
            start: 0,
            end: 100
          }
        ],
        series: []
      }
    }
  },
  watch: {
    chartData(newV, oldV) {
      this.initChart()
    }
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    test(cData) {
      const series = []
      const series_data = this.chartData.series_data
      if (cData) {
        if (cData.length !== 0) {
          cData.forEach(function(item) {
            // series_data[item].forEach(function(sd) {
            series.push({
              name: item,
              type: 'line',
              // stack: '总量',y轴显示会不一致
              barMaxWidth: 35,
              barGap: '10%',
              itemStyle: {
                normal: {
                  label: {
                    show: true,
                    position: 'top'
                  }
                }
              },
              // areaStyle: {},
              smooth: true,
              lineStyle: {
                width: 2
              },
              data: series_data[item]
            })
            // })
          })
          this.showSeries = series
        }
      }
    },
    initChart() {
      require('./walden.js')
      /* eslint-disable */
      this.chart = echarts.init(this.$refs.chart_l, "walden");
      this.op.legend.data = this.chartData.legend_data;
      this.op.legend.selected = this.chartData.legend_selected
      this.op.xAxis.data = this.chartData.xAxis_data;
      this.test(this.op.legend.data);
      this.op.series = this.showSeries;
      /* eslint-disable */
      this.chart.setOption(this.op);
    },
  },
};
</script>
